<template>
  <view>
      <view :class="s.title">{{title}}</view>
      <view v-html="blogContent" :class="s.content">
      {{blogContent}}</view>
      <view :class="s.remark">
          <remark></remark>
      </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from "vue";
import remark from "../../components/remark/remark.vue"
import {getCurrentInstance} from "@tarojs/taro"
import Taro from "@tarojs/taro"
interface blogInfo{
    blogContent:string,
    title:string,
}

export default defineComponent({
    components:{
        remark
    },
    setup(){
        let blogDetail = reactive<blogInfo>({
            blogContent:"",
            title:"",
        })
        onBeforeMount(()=>{
            getBlogDetail()
        })
        async function getBlogDetail():Promise<void>{
            let blogId:string|undefined = getCurrentInstance().router?.params.id
            let data = await Taro.request({
                url:"https://www.ttzxh.icu:443/api/blog/list",
                method:"GET",
                data:{
                    id:blogId
                }
            })
            let leftExg = /&lt/g
            let rightExg = /&gt/g
             let blogContent = data.data.data[0].content
             blogDetail.title = data.data.data[0].title
            let leftContent = blogContent.replace(leftExg,"<")
            let rightContent = leftContent.replace(rightExg,">")
            blogDetail.blogContent = rightContent
        }
        return {
            ...toRefs(blogDetail)
        }
    }
})
</script>

<style lang="scss" module="s">

.content{
    font-size: 13Px;
    box-sizing: border-box;
    padding: 16Px;
    

}
.remark{
    margin: 30px 0;
    
}
.title{
    text-align: center;
    font-size: 20Px;
    font-weight: 1000;
}

</style>